.inbiz-comp-form-manage {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;

  .left-content {
    width: 260px;
    display: flex;
    min-width: 260px;
    flex-flow: column;
    border-right: 1px solid #eee;

    .left-header {
      height: 40px;
      display: flex;
      padding: 0 10px 8px 5px;
      align-items: center;
      justify-content: space-between;

      >span {
        font-size: 14px;
        font-weight: bolder;
        color: var(--inbiz-color-text);
      }

      .add-group-btn {
        display: flex;
        font-size: 14px;
        line-height: 32px;
        cursor: pointer;
        justify-content: space-between;
        color: var(--inbiz-color-primary);
      }
    }

    .group-tree {
      overflow-y: auto;

      >.ant-tree {
        max-width: 251px;
        min-width: 251px;
      }

      .ant-tree.ant-tree-directory .ant-tree-treenode-selected:before,
      .ant-tree.ant-tree-directory .ant-tree-treenode-selected:hover:before {
        background: var(--ant-primary-1);
      }

      .ant-tree.ant-tree-directory .ant-tree-treenode .ant-tree-node-content-wrapper.ant-tree-node-selected {
        color: var(--inbiz-color-heading);
      }

      .ant-tree-treenode {
        padding: 0;

        &::before {
          bottom: 0;
          border-radius: 4px;
        }

        &.ant-tree-treenode-selected {
          .ant-tree-switcher {
            color: var(--inbiz-color-text);
          }
        }

        .ant-tree-switcher {
          line-height: 40px;

          .ant-tree-switcher-icon {
            font-size: 12px;
          }
        }

        .ant-tree-node-content-wrapper {
          overflow: hidden;

          .custon-tree-node {
            width: 100%;
            height: 40px;
            display: flex;
            padding-right: 5px;
            align-items: center;
            justify-content: space-between;

            >span {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }

            .tree-node-hand {
              display: none;
              overflow: unset;
            }

            .anticon {
              color: #999;

              &:hover {
                color: var(--inbiz-color-primary);
              }

              &.del:hover {
                color: #ff4d4f;
              }
            }
          }
        }

        &:hover {
          .ant-tree-node-content-wrapper .tree-node-hand {
            display: inline-flex;
          }
        }
      }
    }
  }

  .right-content {
    flex: 1;
    display: flex;
    overflow: hidden;
    padding-left: 10px;
    flex-direction: column;

    .buttons-header {
      display: flex;
      margin-bottom: 10px;
      justify-content: space-between;

      .ant-space-item {
        .ant-btn {
          display: flex;
          align-items: center;
          justify-content: space-around;
          box-sizing: border-box;
          padding: 0 15px;
          font-size: 14px;

          .anticon {
            padding-right: 6px;
          }
        }
      }
    }

    .table-list {
      flex: 1;
      display: flex;
      overflow: hidden;
      flex-direction: column;

      .ant-table-wrapper {
        overflow: hidden;

        .ant-spin-nested-loading,
        .ant-spin-container,
        .ant-table,
        .ant-table-container {
          height: 100%;

          .ant-table-body {
            max-height: calc(100% - 48px) !important;
          }
        }

        .ant-table-container {
          border: none;
          margin-right: -6px;
        }

        table {
          border: none;

          tr {

            >td:first-child,
            >th:first-child {
              border-left: 1px solid rgba(0, 0, 0, .06);
            }

            >td:last-child,
            >th:last-child {
              border-right: 1px solid rgba(0, 0, 0, .06);
            }
          }
        }

        .ant-table-thead>tr {
          >th {
            border-top: 1px solid rgba(0, 0, 0, .06);

            &:last-child {
              display: none;
            }

            &:nth-last-child(2)::before {
              height: 100%;
            }
          }
        }
      }

      .b-form-manage-table {
        .ant-table-row-selected>td {
          background-color: #fff !important;

          &::before {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            content: '';
            position: absolute;
            background: var(--ant-primary-1) !important;
          }

          .ant-table-cell-content {
            z-index: 1;
            position: relative;
          }
        }

        .ant-table-tbody>tr.ant-table-row-selected>td {
          background-color: #ddedfe;
        }
      }

      .ant-table.ant-table-bordered>.ant-table-container>.ant-table-body>table>tbody>tr>td:last-child {
        border-right: 1px solid rgba(0, 0, 0, 0.06);
      }

      .ant-table.ant-table-bordered>.ant-table-container>.ant-table-body>table>tbody>tr>.ant-table-cell-fix-right-first:after,
      .ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table>thead>tr>.ant-table-cell-fix-right-first:after {
        border-right: none;
      }

      .inbiz-pagination {
        padding: 10px 0 0;

        .ant-pagination {
          position: relative;
        }
      }
    }
  }
}

// 新建/编辑表单分组弹窗
.form-manage-add-group-modal {
  .ant-modal-footer {
    padding: 0 20px 20px;
  }
}

// 导入/更新弹窗
.form-manage-import-modal {
  .ant-modal-footer {
    padding: 0 20px 20px;
  }

  .form-manage-import-box {
    display: flex;
    font-size: 12px;
    flex-direction: column;

    .import-content {
      display: flex;
    }
  }

  .update-placeholder {
    color: #ff4d4f;
    margin-left: 5px;
  }
}

// 新建表单弹窗
.form-manage-add-form-modal {
  .ant-modal-footer {
    padding: 0 20px 20px;
  }

  .inbiz-custom-select-group {

    .ant-select:hover,
    .ant-select-focused {
      z-index: 1;
    }

    .ant-select-selector {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    .ant-btn {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;

      .anticon:hover {
        transform: scale(1);
      }
    }

    .ant-btn:focus {
      color: rgba(0, 0, 0, .85);
      border: 1px solid #d9d9d9;
    }

    .ant-btn:hover {
      color: var(--ant-primary-color-hover);
      border-color: var(--ant-primary-color-hover);
    }
  }
}

.form-manage-select-group {
  .form-group-down {
    padding-left: 30px;
  }
}

// 编辑表单抽屉
.form-manage-edit-drawer {
  .ant-drawer-header {
    border-bottom: none;
    padding: 10px 15px 0 24px;

    .form-manage-edit-drawer-header {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      button {
        padding: 4px 10px;
        line-height: 16px;

        .anticon {
          margin-right: 5px;
          display: inline-flex;

          &:hover {
            transform: scale(1);
          }
        }
      }

      button.ant-btn-default {
        color: #666;

        &:hover {
          color: var(--ant-primary-color-hover);
        }

        &:focus {
          border-color: #d9d9d9;
        }
      }

      .close-drawer {
        width: 32px;
        height: 32px;
        display: flex;
        cursor: pointer;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .ant-drawer-body {
    padding: 0 24px 24px;

    .ant-tabs {
      height: 100%;

      .ant-tabs-extra-content {
        .ant-btn .anticon {
          margin-right: 5px;
        }
      }

      .ant-tabs-content {
        height: 100%;

        .form-preview {
          width: 100%;
          height: 100%;
          border: none;
        }
      }
    }
  }
}